<template>
    <transition name="hi-fade">
        <div class="navbar-nav">
            <ul class="nav">
                <li class="nav-item" v-for="item in navList" :class="{active: item.name == 'Contact'}">
                    <a :href="item.link" class="nav-link">{{item.name}}</a>
                    <ul class="nav">
                        <li class="nav-item" v-for="subitem in item.children">
                            <a :href="subitem.link" class="nav-link">{{subitem.name}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </transition>
</template>

<script type="text/babel">
    export default {
        name: 'navleft',

        props: {
            navList: {
                type: Array,
                default: [],
                required: true
            }
        },

        data() {
            return {
            }
        },

        methods: {
        }
    };
</script>

<style lang="scss" scoped>
    .navbar-nav {
        margin-left: 30px;
        .nav {
            > .nav-item {
                > .nav-link {
                    font-size: 16px;
                    line-height: 1.13;
                    opacity: 0.3;
                    color: #000;
                    padding: 11px 20px;
                }
                > .nav {
                    padding-left: 10px;
                    > .nav-item {
                        > .nav-link {

                        }
                    }
                }
                &.active {
                    > .nav-link {
                        opacity: 1;
                    }
                }
            }
        }
    }
</style>